<template>
  <div>
    <h2 style="margin-bottom: 20px;">日志管理</h2>
    <el-date-picker
      v-model="searchDate"
      type="date"
      placeholder="查询日期"
      value-format="yyyy-MM-dd"
      style="width: 200px; margin-right: 10px;"
    ></el-date-picker>
    <el-time-picker
      v-model="searchTime"
      placeholder="查询时间"
      value-format="HH:mm:ss"
      style="width: 200px; margin-right: 10px;"
    ></el-time-picker>
    <el-button type="primary" @click="fetchLogs">查询</el-button>
    <el-table :data="logs" style="width: 100%" @sort-change="handleSort">
      <el-table-column prop="date" label="日期" sortable="custom" width="120"></el-table-column>
      <el-table-column prop="time" label="时间" sortable="custom" width="120"></el-table-column>
      <el-table-column prop="message" label="内容"></el-table-column>
    </el-table>
    <el-pagination
      @current-change="handlePageChange"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="total, prev, pager, next"
      :total="totalLogs"
    ></el-pagination>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      logs: [],
      searchDate: "",
      searchTime: "",
      currentPage: 1,
      pageSize: 10,
      totalLogs: 0,
      sort: {
        prop: "",
        order: ""
      }
    };
  },
  methods: {
    async fetchLogs() {
      try {
        const response = await this.$axios.get("/api/logs", {
          params: {
            page: this.currentPage,
            size: this.pageSize,
            sortProp: this.sort.prop,
            sortOrder: this.sort.order,
            searchDate: this.searchDate,
            searchTime: this.searchTime
          }
        });
        this.logs = response.data.logs.map(log => {
          const [date, time, ...messageParts] = log.split(" ");
          return {
            date,
            time,
            message: messageParts.join(" ")
          };
        });
        this.totalLogs = response.data.total;
      } catch (error) {
        this.$message.error("获取日志失败", error.message);
      }
    },
    handleSort({ prop, order }) {
      this.sort = { prop, order };
      this.fetchLogs();
    },
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchLogs();
    }
  },
  mounted() {
    this.fetchLogs();
  }
};
</script>
  
  <style scoped>
/* Add any custom styles here */
</style>
  